<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>折线图</title>
    <style>
      #box {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 1px #ccc solid;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="600" height="600"></canvas>
  </body>
</html>
<script>
  const dom = document.querySelector("#box");
  const context = dom.getContext("2d");
  //   X
  context.beginPath();
  context.moveTo(50, 570);
  context.lineTo(50, 50);
  context.stroke();
  // y
  context.beginPath();
  context.moveTo(30, 550);
  context.lineTo(550, 550);
  context.stroke();
  //   折现
  context.moveTo(100, 500);
  context.lineTo(160, 400);
  context.moveTo(160, 400);
  context.lineTo(180, 530);
  context.moveTo(180, 530);
  context.lineTo(250, 300);
  context.moveTo(250, 300);
  context.lineTo(300, 400);
  context.moveTo(300, 400);
  context.lineTo(360, 222);
  context.moveTo(360, 222);
  context.lineTo(400, 500);
  context.stroke();
  //   文字
  for (let i = 1; i < 5; i++) {
    context.font = "30px sans-serif";
    context.fillText(`${i}组`, i*90+i, 580);
    context.fill();
  }
</script>
